<template>
  <!-- <Card size="small" title="商品分类" :style="{width: '100%', height: `${height}px` }"> -->
  <Card size="small" title="商品分类" :style="{width: '100%', height: '100%' }">
    <!-- <template #extra>
      <Icon title="刷新分类" icon="icons8:refresh" @click="getCateList(true)"/>
    </template> -->
    <template #extra>
      <Dropdown placement="bottom" trigger="click">
        <ToolOutlined title="点击设置" />
        <template #overlay>
          <Menu>
            <MenuItem><a @click="getCateList(true)" title="刷新商品分类的列表数据"> 刷新分类 </a></MenuItem>
            <MenuItem><a @click="handleClearCate" title="清空选择的分类，就是全选"> 全选分类 </a></MenuItem>
          </Menu>
        </template>
      </Dropdown>
    </template>

    <Tree v-model:selectedKeys="cateIdListRef"
    v-if="treeData.length > 0"
    :draggable="false"
    multiple
    block-node
    :show-icon="false"
    :default-expand-all="cateExpandAllRef"
    :fieldNames="{key: 'id', title: 'name', children: 'children',}"
    :tree-data="treeData"
    @select="handleSelectTree"
    >
      <template #title="{ dataRef, }">
        <div v-if="dataRef.icon"><Icon :icon="dataRef.icon" style="width:25px;" /> {{dataRef.name}}</div>
        <div v-else><span style="display:inline-block;width:29px;"></span>{{dataRef.name}}</div>
      </template>
    </Tree>
  </Card>

</template>
<script lang="ts" name="GoodsModalOfCateSide" setup>
import {reactive, ref, toRaw,} from 'vue';
import {Tree, Card, Dropdown, Menu, MenuItem,} from 'ant-design-vue';
import type { TreeProps, } from 'ant-design-vue';
import { ToolOutlined, ReloadOutlined} from '@ant-design/icons-vue';
import { Icon, } from '/@/components/Icon/index';
import {useMessage} from '/@/hooks/web/useMessage';

import {getListData,} from '/@/api/bd/goodsCate';

const {createMessage, createConfirm,} = useMessage();
const {info, success, warning, error} = createMessage;

const height = window.innerHeight - 55;

const cateIdListRef = ref([])
const cateExpandAllRef = ref(true)
const treeData = ref<TreeProps['treeData']>([])

const spin = ref(false)
const getCateList = (tip?:boolean) => {
  if (tip) spin.value = true
  getListData().then(dd => {
    treeData.value = dd as any
    if (tip) success('分类，刷新成功')
  }).finally(() => spin.value = false)
}
getCateList()

const emits = defineEmits(['select-change',]);

const handleClearCate = () => {
  cateIdListRef.value = []
  emits('select-change', [])
}

const handleSelectTree = (selectedKeys,) => {
  emits('select-change', selectedKeys)
}

</script>

<style scoped>
</style>
